<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LKAudio</title>
    <script src="./lkaudio.js"></script>
    <link rel="stylesheet" href="./lkaudio.css">
    <style>
        .content {
            margin: 0 auto;
            margin-top: 70px;
            padding: 20px;
            width: 800px;
            height: 200px;
            background-color: #fff;
        }

        .content>h2 {
            text-align: center;
            margin: 30px;
        }
    </style>
</head>

<body style="background-color: #ccc;">
    <div class="content">
        <h2>多用途音频控制组件，自带钩子函数</h2>
            <div id="demo1" style="width: 500px; height: 50px; margin: 0 auto;">
                <div class="lkaudio forbid-text-selected">
                    <!-- 播放控制 -->
                    <div class="lka-play-control">
                        <div class="lka-play-button show">
                            <svg t="1586783695921" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8589" width="100%" height="100%">
                                <path d="M896 512L128 1024V0z" p-id="8590" fill="#2c2c2c"></path>
                            </svg>
                        </div>
                        <div class="lka-pause-button hide">
                            <svg t="1586783770062" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9609" width="100%" height="100%">
                                <path d="M128 0h253.155556v1024H128V0z m512 0h256v1024h-256V0z" fill="#2c2c2c"
                                    p-id="9610">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <!-- 时间 -->
                    <div class="lka-time">
                        <span class="lka-time-current">00:00</span> /
                        <span class="lka-time-total">00:00</span>
                    </div>
                    <!-- 时间轴 -->
                    <div class="lka-timeline">
                        <div class="lka-timeline-baseline">
                            <div class="lka-timeline-load"></div>
                            <div class="lka-timeline-play"></div>
                            <span class="lka-timeline-activepoint"></span>
                        </div>
                    </div>
                    <!-- 音量控制 -->
                    <div class="lka-volume-control">
                        <div class="lka-volume-button show">
                            <svg t="1586787437558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4722" width="100%" height="100%">
                                <path
                                    d="M526.432 924.064c-20.96 0-44.16-12.576-68.96-37.344L274.752 704H192c-52.928 0-96-43.072-96-96V416c0-52.928 43.072-96 96-96h82.752l182.624-182.624c24.576-24.576 47.744-37.024 68.864-37.024C549.184 100.352 576 116 576 160v704c0 44.352-26.72 60.064-49.568 60.064zM687.584 730.368a31.898 31.898 0 0 1-18.656-6.016c-14.336-10.304-17.632-30.304-7.328-44.672l12.672-17.344C707.392 617.44 736 578.624 736 512c0-69.024-25.344-102.528-57.44-144.928-5.664-7.456-11.328-15.008-16.928-22.784-10.304-14.336-7.04-34.336 7.328-44.672 14.368-10.368 34.336-7.04 44.672 7.328 5.248 7.328 10.656 14.464 15.968 21.504C764.224 374.208 800 421.504 800 512c0 87.648-39.392 141.12-74.144 188.32l-12.224 16.736c-6.272 8.704-16.064 13.312-26.048 13.312z"
                                    p-id="4723" fill="#2c2c2c"></path>
                                <path
                                    d="M796.448 839.008a31.906 31.906 0 0 1-21.088-7.936c-13.28-11.648-14.624-31.872-2.976-45.152C836.608 712.672 896 628.864 896 512s-59.392-200.704-123.616-273.888c-11.648-13.312-10.304-33.504 2.976-45.184 13.216-11.648 33.44-10.336 45.152 2.944C889.472 274.56 960 373.6 960 512s-70.528 237.472-139.488 316.096c-6.368 7.232-15.2 10.912-24.064 10.912z"
                                    p-id="4724" fill="#2c2c2c"></path>
                            </svg>
                        </div>
                        <div class="lka-volume-close-button hide">
                            <svg t="1586787425794" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4556" width="100%" height="100%">
                                <path
                                    d="M192 320c-54.4 0-96 41.6-96 92.8V608c0 54.4 41.6 96 96 96h83.2l182.4 188.8c22.4 22.4 44.8 35.2 67.2 35.2 6.4 0 12.8 0 19.2-3.2 19.2-9.6 32-28.8 32-51.2v-224L233.6 320H192z m758.4 489.6l-57.6-54.4C934.4 681.6 960 598.4 960 512c0-115.2-41.6-227.2-118.4-316.8-12.8-12.8-32-16-44.8-3.2-12.8 12.8-16 32-3.2 44.8 64 76.8 102.4 176 102.4 275.2 0 70.4-19.2 137.6-51.2 195.2L752 617.6c9.6-35.2 16-70.4 16-105.6 0-73.6-22.4-144-67.2-204.8-9.6-16-28.8-19.2-44.8-6.4s-19.2 28.8-6.4 44.8c35.2 48 54.4 108.8 54.4 166.4 0 19.2-3.2 38.4-6.4 54.4L576 451.2V153.6c0-25.6-12.8-44.8-32-51.2-25.6-9.6-57.6 0-86.4 32L352 240 214.4 105.6c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l736 704c6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8z"
                                    p-id="4557" fill="#2c2c2c"></path>
                            </svg>
                        </div>
                    </div>
                    <!-- 更多 -->
                    <div class="lka-more">
                        <div class="lka-more-button">
                            <svg t="1586787761676" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26929" width="100%" height="100%"><path d="M512 118.153846m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z" fill="#2c2c2c" p-id="26930"></path><path d="M512 512m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z" fill="#2c2c2c" p-id="26931"></path><path d="M512 905.846154m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z" fill="#2c2c2c" p-id="26932"></path></svg>                        </div>
                    </div>
                    <!-- 音频本体 -->
                    <div id="lka-audio">
                        <!-- autoplay="autoplay" -->
                        <audio class="audio hide" controls="controls" loop="loop">
                            <source src="" type="audio/mpeg" />
                        </audio>
                    </div>
                </div>
            </div>
    </div>
    <script>
        var audio = new LKAudio({
            el: '#demo1',               // 容器元素
            src: './audio.mp3',         // 路径
            check: 500,                 // 钩子函数检查时间
            volume: true,               // 允许音量控制
            more: true,                 // 运行更多
            // 时间轴钩子函数
            timeline(t) {
                console.log('钩子函数正在执行', t);
                
            }
        })
    </script>
</body>

</html>